<template>
    <div class="search-video">
        <div class="video-detials">
            <div class="video-detial" v-for="(item, index) in 4" :key="index">
                <img src="https://img2.baidu.com/it/u=532571783,601001619&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707"
                    alt="">
                <div class="state"></div>
                <div class="video-info">
                    <div class="title">测试测试测试测试测试测试测试测试测试测试</div>
                    <div class="author">
                        <div class="tag">公募基金</div>
                        <div class="name">李铁军</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
.search-video {
    width: 100%;
    .video-detials {
        width: 670px;
        height: auto;
        margin: 26px auto;
        display: grid;
        grid-template-columns: 335px 335px;
        gap: 35px 20px;

        .video-detial {
            width: 335px;
            height: 315.22px;
            border-radius: 20px 20px 0 0;
            overflow: hidden;

            img {
                width: 335px;
                height: 210px;
                border-radius: 20px;
            }

            .video-info {
                margin-top: -5px;
                width: 100%;
                height: calc(100% - 210px);
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-top: 16px;
                    font-size: 30px;
                    font-weight: 600;
                    color: #262E40;
                }

                .author {
                    display: flex;

                    .tag {
                        width: 108px;
                        height: 35px;
                        background-color: #FEE4B0;
                        font-size: 23px;
                        line-height: 35px;
                        text-align: center;
                    }

                    .name {
                        padding-left: 9px;
                        font-size: 26px;
                        font-weight: 400;
                        line-height: 35.2px;
                    }
                }
            }
        }
    }
}
</style>